<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人详情</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui2/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/aui2/aui-pull-refresh.css" />
	<style>
	    body {}
	    .avatar {
	        width: 90px;
	        height: 90px;
	        margin-left: 1em;
	        margin-top: 1em;
	        margin-right: 1em;
	        margin-bottom: 1em;
	    }
	    .title {
	    	font-weight:bold;
	    	font-size:20px;
	    }
	    .classname {
	    	font-weight:bold;
	    	font-size:16px;
	    }
	    .right {
	    	float:right
	    }
	</style>
</head>
<body>
	<section class="aui-refresh-content">
		<div class="aui-content aui-margin-b-1">
			
            
            <div id="leader_list"></div>
            <script id="leader_template" type="text/x-dot-template">
	            	<div class="aui-card-list-header title">
	                	我管理的班级
	            	</div>
                	<div class="aui-card-list">
			            <div class="aui-card-list-content-padded">
			                <span class="classname">{{=it.class_name}}</span> <span class="right">学生人数：{{=it.people_count}}</span>
			            </div>
			            <div class="aui-card-list-footer">
			                加入时间：{{=it.join_time}}
			            </div>
			        </div>
    		</script>
	        <!--<div class="aui-card-list">
	            <div class="aui-card-list-content-padded ">
	                <span class="classname">十一年二班</span> <span class="right">学生人数：11</span>
	            </div>
	            <div class="aui-card-list-footer">
	                加入时间：2017年10月20日
	            </div>
	        </div>-->
        </div>
		<div class="aui-content">
            <div class="aui-card-list-header title">
                	我加入的班级
            </div>
	     	<div id="join_list"></div>
            <script id="join_template" type="text/x-dot-template">
                {{ for(var i=0; i< it.length; i++) { }}
                	<div class="aui-card-list">
			            <div class="aui-card-list-content-padded">
			                <span class="classname">{{=it[i].class_name}}</span> <span class="right">班主任：{{=it[i].leader}}</span>
			            </div>
			            <div class="aui-card-list-footer">
			                加入时间：{{=it[i].join_time}}
			            </div>
			        </div>
                {{ } }}
    		</script>
			<!--<div id="demo">
		        <div class="aui-card-list">
		            <div class="aui-card-list-content-padded">
		                <span class="classname">十年二班</span> <span class="right">班主任：李红英</span>
		            </div>
		            <div class="aui-card-list-footer">
		                加入时间：2017年10月20日
		            </div>
		        </div>
		        <div class="aui-card-list">
		            <div class="aui-card-list-content-padded">
		                <span class="classname">十年四班</span> <span class="right">班主任：赵六</span>
		            </div>
		            <div class="aui-card-list-footer">
		                加入时间：2017年10月20日
		            </div>
		        </div>
		        <div class="aui-card-list">
		            <div class="aui-card-list-content-padded">
		                <span class="classname">十年七班</span> <span class="right">班主任：路人甲</span>
		            </div>
		            <div class="aui-card-list-footer">
		                加入时间：2017年10月20日
		            </div>
		        </div>
		        <div class="aui-card-list">
		            <div class="aui-card-list-content-padded">
		                <span class="classname">十一年八班</span> <span class="right">班主任：路人乙</span>
		            </div>
		            <div class="aui-card-list-footer">
		                加入时间：2017年10月20日
		            </div>
		        </div>
	        </div>-->
        </div>
    </section>
</body>
<script src="../../script/doT.min.js"></script>
<script data-main="../../script/main" src="../../script/require.js"></script>
<script type="text/javascript">
	var count = 0;
	var token;
	var isbottom = false;//是否到底
    var isRefresh = true;//是否刷新
	apiready = function(){
		require(["api","zepto","common"],function(){
			$zb.prefs.getPrefs('token',function(ret){
		    	token = ret.value;
		    	sendAjax();
		    })
		    
		    api.setRefreshHeaderInfo({
                loadingImg: 'widget://image/refresh.png',
                bgColor: '#ccc',
                textColor: '#fff',
                textDown: '下拉刷新...',
                textUp: '松开刷新...'
            }, function(ret, err) {
                api.refreshHeaderLoadDone();
                if(ret){
                    isbottom = false;
                    isRefresh=true;
                    sendAjax();
                }
            });
		    
		    api.addEventListener({
                name:'scrolltobottom',
                extra:{
                    threshold:0            //设置距离底部多少距离时触发，默认值为0，数字类型
                }
            }, function(){
                isRefresh = false;
                isbottom?api.toast({
                    msg:'没有更多了'
                }):sendAjax();        
            });
		})
	};
	
	function sendAjax(){
		var data = {
			values:{
				token:token,
				appindex:count
			}
		}
		$zb.requestForData(data,'classes','getClasses',function(ret){
			if(isRefresh){
                $("#join_list").html(doT.template($("#join_template").text())(ret.data.join));
            }else{
                $("#join_list").append(doT.template($("#join_template").text())(ret.data.join));
            }
            if(ret.data.leader){
            	$("#leader_list").html(doT.template($("#leader_template").text())(ret.data.leader));
            }
            if(ret.data.length===10){
                count+=10;
            }else{
                isbottom = true;
            }
		});
	}
		
	
</script>
</html>